<!-- 
 * 编辑需求
 * @author: 冯宇
 * @since: 2022-05-16
 * index.vue
-->
<template>
  <div class="edit-need-container detailsPageBox">
<div class="detailsMain">

    <div class="need-title">
      <div class="icon"></div>
      <div>需求基本信息</div>
    </div>



    <!-- 技术需求 -->
    <div style="display:flex" v-if="data.form.demandTypeId == 1">

      <el-form :model="data.form" label-width="130px" :rules="data.rules" ref="formDom1"
        style="width:40%;max-width: 500px;">
        <el-form-item label="需求名称:" prop="demandTitle">
          <el-input v-model="data.form.demandTitle" placeholder="请输入需求名称"></el-input>
        </el-form-item>
        <el-form-item label="截止日期:" prop="demandExpirationDate">
          <el-date-picker v-model="data.form.demandExpirationDate" value-format="YYYY-MM-DD" type="date"
            placeholder="请选择日期" />
        </el-form-item>
        <el-form-item label="所属领域:">
          <ChooseIndustry @changeIndustry="changeIndustry" :backInfo="data.industry"></ChooseIndustry>
        </el-form-item>
      </el-form>

      <el-form :model="data.form" label-width="130px" :rules="data.rules" ref="formDom2"
        style="width:60%;max-width: 700px;">
        <el-form-item label="需求投资预算:" prop="demandBudget">
          <div style="display:flex;width: 100%;">
            <el-input v-model="data.form.demandBudget" :disabled="data.form.demandBudget === 0"
              style="flex: 1; margin-right: 10px" placeholder="请输入投资预算" />
            <div style="font-size:12px">万元</div>
            <el-checkbox @change="setInvestBudget" v-model="data.form.demandBudgetType" label="价格面议" border
              style="margin-left: 10px;" />
          </div>
        </el-form-item>
        <el-form-item label="需求所在地:">
          <ChooseAddress width="100%" :showDetailAddress="true" :backInfo="data.address" direction="right"
            @changeAddress="changeAddress"></ChooseAddress>
        </el-form-item>

      </el-form>
    </div>
    <el-form :model="data.form" label-width="130px" :rules="data.rules" v-if="data.form.demandTypeId == 1"
      ref="formDom3" style="width:100%">
      <el-form-item label="需求背景描述:" prop="demandDescribe">
          <!-- <div class="desc-container">
            <div class="container">
              <div class="title">示例选择</div>
              <el-select style="width: 100px" size="small" @change="changeExample" placeholder="示例列表">
                <el-option :label="example.sampleName" :value="example.sampleContent" v-for="(example,i) in data.descExampleSelectList" :key="'example'+i"/>
              </el-select>
            </div>
            <TextEditor @textEdit="textEdit" :type="0" :html="data.form.demandDescribe"></TextEditor>
          </div> -->
          <el-input v-model="data.form.demandDescribe" resize="none" rows="6" maxlength="2000" show-word-limit type="textarea"
            :placeholder="data.textAreaPlaceholder.p1" />
      </el-form-item>
      <el-form-item label="拟解决的技术难题:" prop="demandProblem">
        <!-- <TextEditor @textEdit="textEdit" :type="1" :html="data.form.demandProblem"></TextEditor> -->
        <el-input v-model="data.form.demandProblem" resize="none" rows="6" maxlength="2000" show-word-limit type="textarea"
            :placeholder="data.textAreaPlaceholder.p2" />
      </el-form-item>
      <el-form-item label="具体技术指标要求:">
        <!-- <TextEditor @textEdit="textEdit" :type="2" :html="data.form.demandTarget"></TextEditor> -->
        <el-input v-model="data.form.demandTarget" resize="none" rows="6" maxlength="2000" show-word-limit type="textarea"
            :placeholder="data.textAreaPlaceholder.p3" />
      </el-form-item>
      <el-form-item>
        <template #label></template>
        <template #default>
          <div>
            <div>
              <el-button type="primary" @click="textToKeywords">一键生成关键词和产业链</el-button>
            </div>
            <div class="form-item-template">
              <div class="form-item-title">需求关键词:</div>
              <div>
                <el-tag closable class="tag" v-for="(tag1, tag1index) in data.form.demandKeyword" :key="tag1"
                  @close="closeTag(0, tag1index)">{{ tag1 }}</el-tag>
                <el-button type="success" @click="addKeyword">+添加技术点关键词</el-button>
              </div>
            </div>
            <div class="form-item-template">
              <div class="form-item-title">需求产业链节点:</div>
              <div>
                <el-tag closable class="tag" v-for="(tag2, tag2index) in data.form.demandProductName" :key="tag2"
                  @close="closeTag(1, tag2index)">{{ tag2 }}</el-tag>
              </div>
            </div>
          </div>
        </template>
      </el-form-item>
    </el-form>




    <!-- 科技服务需求 -->
    <div style="display:flex" v-if="data.form.demandTypeId == 2">
      <el-form :model="data.form" label-width="90px" :rules="data.rules1" ref="formDom4"
        style="width:40%;max-width: 500px;">
        <el-form-item label="需求名称:" prop="demandTitle">
          <el-input v-model="data.form.demandTitle" placeholder="请输入需求名称" style="width: 300px"></el-input>
        </el-form-item>
      </el-form>
      <el-form :model="data.form" label-width="90px" :rules="data.rules1" ref="formDom5"
        style="width:60%;max-width: 700px;">
        <el-form-item label="需求所在地:">
          <ChooseAddress width="500px" :showDetailAddress="true" :back-info="data.address"
            @changeAddress="changeAddress" direction="right"></ChooseAddress>
        </el-form-item>
      </el-form>
    </div>
    <el-form :model="data.form" label-width="90px" :rules="data.rules1" v-if="data.form.demandTypeId == 2"
      ref="formDom6">
      <el-form-item label="需求描述:" prop="demandDescribe">
        <!-- <TextEditor @textEdit="textEdit" :type="0" :html="data.form.demandDescribe"></TextEditor> -->
        <el-input v-model="data.form.demandDescribe" resize="none" rows="6" :show-word-limit="true" type="textarea"
            :placeholder="data.textAreaPlaceholder.p1" />
      </el-form-item>
    </el-form>



    <div class="need-title">
      <div class="icon"></div>
      <div class="title">需求基本信息</div>
    </div>

    <!-- 联系方式 -->
    <el-form :model="data.form" :label-width="data.form.demandTypeId == 1 ? '130px' : '90px'" :rules="data.rules"
      ref="contactDom" style="width:40%;max-width: 500px;">
      <el-form-item label="姓名:" prop="demandContactPerson">
        <el-input v-model="data.form.demandContactPerson" />
      </el-form-item>
      <el-form-item label="手机:" prop="demandContactPhone">
        <el-input v-model="data.form.demandContactPhone" />
      </el-form-item>
    </el-form>

    <div class="need-title">
      <div class="icon"></div>
      <div class="title">需求发布设置</div>
    </div>

    <el-form :model="data.form" :label-width="data.form.demandTypeId == 1 ? '130px' : '90px'">
      <el-form-item label="是否热门:">
        <el-radio-group v-model="data.form.isHot">
          <el-radio :label="true">是</el-radio>
          <el-radio :label="false">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="公开发布:">
        <el-checkbox v-model="data.form.isPublic">勾选后，需求会被更多科研工作者看到，解决概率更大；不勾选则仅平台工作人员可见，保护企业隐私</el-checkbox>
      </el-form-item>
    </el-form>
</div>
    <div class="send-btn detailsHandBtn">
      <el-button type="primary" style="width: 100px;height:36px" @click="save">保存</el-button>
      <el-button style="width: 100px;height:36px">重置</el-button>
    </div>

    <!-- 关键词弹出框 -->
    <el-dialog v-model="data.keywordsDialog" width="800px" :show-close="false" :close-on-click-modal="false">
      <template #title>
        <div class="dialog-title">
          <h2>技术领域关键词</h2>
          <div>系统根据技术领域算法模型推荐了以下技术关键词，请勾选此需求所涉及的技术领域，有助于提高后续的供需匹配率~</div>
        </div>
      </template>
      <template #default>
        <el-checkbox-group v-model="data.form.demandKeyword" @change="chooseKeywords">
          <el-checkbox :label="keyword" border v-for="keyword in data.keywordsList" />
        </el-checkbox-group>
      </template>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="textToIndustry" :disabled="data.loading">下一步</el-button>
          <el-button @click="closeDialog(0)" :disabled="data.loading">取消</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 产业链弹出框 -->
    <el-dialog v-model="data.industryDialog" width="800px" :show-close="false" :close-on-click-modal="false">
      <template #title>
        <div class="dialog-title">
          <h2>需求所涉及产业链</h2>
          <div>系统根据需求描述，智能推荐了该需求可能涉及的产业链节点，请确认勾选，系统通过勾选的产业链节点，进行相关
节点智能匹配延伸，将提高供需匹配率~</div>
        </div>
      </template>
      <template #default>
        <el-checkbox-group v-model="data.form.demandProductName" @change="chooseIndustry">
          <el-checkbox :label="industry.name" border v-for="industry in data.industryList" >
            {{ industry.name }}
                <el-tooltip class="item" effect="dark" :content="industry.describe" placement="right">
                  <el-icon><QuestionFilled /></el-icon>
                </el-tooltip>
          </el-checkbox>
        </el-checkbox-group>
      </template>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="data.industryDialog = false">确定添加</el-button>
          <el-button @click="closeDialog(1)">取消</el-button>
        </span>
      </template>
    </el-dialog>

    <LoadingAnimation v-show="data.loading"></LoadingAnimation>
  </div>
</template>

<script setup>
import { onMounted, reactive, onUnmounted, ref, computed } from 'vue'
import { demandDetailApi, editDemandApi, editServiceDemandApi } from '@/api/interface/demand.js' //需求
import { textToKeywordsApi, textToIndustryApi } from '@/api/interface/algorithm.js' //算法
import { getExampleExplainTitleListApi, getExampleExplainListApi ,allExampleApi} from '@/api/interface/exampleExplain.js'

import { ElMessage, ElMessageBox } from 'element-plus'

import {backRoute} from '@/utils/common.js'

import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
const store = useStore()
const router = useRouter()
const route = useRoute()

const data = reactive({
  address: {
    provinceCode: '',
    cityCode: '',
    areaCode: '',
    provinceName: '',
    cityName: '',
    areaName: '',
    detailAddress: '',
  },
  industry: {
    industryCode1: '',
    industryCode2: '',
    industryCode3: '',
    industryName1: '',
    industryName2: '',
    industryName3: '',
  },
  form: {},
  rules: {
    demandTitle: {
      required: true,
      validator: (rule, value, callback) => {
        if (/^[\u4e00-\u9fa5/a-zA-Z0-9-_#@&+=]{3,30}$/.test(value) == false) {
          callback(new Error('请输入3-30位字符，可使用特殊符号 _ # @ & + ='))
        } else {
          callback()
        }
      },
      trigger: 'blur',
    },
    // provinceCode: { required: true },
    demandBudget: {
      required: true,
      validator: (rule, value, callback) => {
        if (/^[0-9]{1,12}$/.test(value) == false) {
          callback(new Error('请输入正确的金额，只能填写整数'))
        } else {
          callback()
        }
      },
      trigger: ['change', 'blur'],
    },
    demandExpirationDate: [
      { type: 'date', required: true, trigger: ['change', 'blur'], message: '请选择日期' },
      {
        validator: (rule, value, callback) => {
          if (new Date(value).getTime() < new Date().getTime()) {
            callback(new Error('请输入正确的时间'))
          } else {
            callback()
          }
        },
        trigger: 'change',
      },
    ],
    // industryCode3: { required: true },
    demandDescribe: {
      required: true,
      validator: (rule, value, callback) => {
        if (value == '<p><br></p>') {
          callback(new Error('请填写需求描述'))
        } else {
          callback()
        }
      },
      trigger: ['blur', 'change', 'input'],
    },
    demandProblem: {
      required: true,
      validator: (rule, value, callback) => {
        if (value == '<p><br></p>') {
          callback(new Error('请简要陈述技术难题'))
        } else {
          callback()
        }
      },
      trigger: ['blur', 'change', 'input'],
    },
    demandContactPerson: {
      required: true,
      validator: (rule, value, callback) => {
        if (/^[\u4e00-\u9fa5/0-9]{2,15}$/.test(value) == false) {
          callback(new Error('请输入正确的姓名'))
        } else {
          callback()
        }
      },
      trigger: 'blur',
    },
    demandContactPhone: {
      required: true,
      validator: (rule, value, callback) => {
        if (/^1[0-9]{10}$/.test(value) == false) {
          callback(new Error('请输入正确的手机号'))
        } else {
          callback()
        }
      },
      trigger: 'blur',
    },
  },
  rules1: {
    demandTitle: {
      required: true,
      validator: (rule, value, callback) => {
        if (/^[\u4e00-\u9fa5/a-zA-Z0-9-_#@&+=]{3,30}$/.test(value) == false) {
          callback(new Error('请输入3-30位字符，可使用特殊符号 _ # @ & + ='))
        } else {
          callback()
        }
      },
      trigger: 'blur',
    },
    provinceCode: { required: true },
    demandDescribe: {
      required: true,
      validator: (rule, value, callback) => {
        if (value == '<p><br></p>') {
          callback(new Error('请填写需求描述'))
        } else {
          callback()
        }
      },
      trigger: ['blur', 'change', 'input'],
    },
  },
  textAreaPlaceholder: {
    p1: "",
    p2: "",
    p3: "",
  },
  loading: false,
  keywordsDialog: false,
  industryDialog: false,
  keywordsList: [],
  industryList: [],
  descExampleSelectList: [],
})

const formDom1 = ref(null)
const formDom2 = ref(null)
const formDom3 = ref(null)
const formDom4 = ref(null)
const formDom5 = ref(null)
const formDom6 = ref(null)
const contactDom = ref(null)

onMounted(() => {
  const level = router.currentRoute.value.meta.level
  store.dispatch('setting/setRouterCut', level)
})
onUnmounted(() => {
  store.dispatch('setting/setRouterCut', 2)
})

const getDetail = () => {
  demandDetailApi({ id: route.params.id?route.params.id:sessionStorage.demandId }).then(res => {
    if (res.status === 200) {
      data.form = res.data
      res.data.demandBudgetType==0 ? data.form.demandBudgetType = true : data.form.demandBudgetType = false

      data.address.provinceCode = res.data.demandProvinceCode
      data.address.cityCode = res.data.demandCityCode
      data.address.areaCode = res.data.demandAreaCode
      data.address.provinceName = res.data.demandProvinceName
      data.address.cityName = res.data.demandCityName
      data.address.areaName = res.data.demandAreaName

      data.address.detailAddress = res.data.detailAddress

      data.industry.industryCode1 = res.data.industryCodeOne
      data.industry.industryCode2 = res.data.industryCodeTwo
      data.industry.industryCode3 = res.data.industryCodeThree
      data.industry.industryName1 = res.data.industryNameOne
      data.industry.industryName2 = res.data.industryNameTwo
      data.industry.industryName3 = res.data.industryNameThree
    }
  })
}
getDetail()




//地址
const changeAddress = (info) => {
  data.address = info
  console.log(info, '修改地址');
}
//领域
const changeIndustry = (info) => {
  data.industry = info
  console.log(info, '修改领域');
}





//价格面议
const setInvestBudget = (bool) => {
  bool ? (data.form.demandBudget = 0) : (data.form.demandBudget = '')
}
// //富文本
// const textEdit = (text, type) => {
//   console.log(text)
//   if (type === 0) {
//     data.form.demandDescribe = text
//   } else if (type === 1) {
//     data.form.demandProblem = text
//   } else if (type === 2) {
//     data.form.demandTarget = text
//   }
// }
//获取示例
const getExampleExplainList = () => {
  allExampleApi().then(res => {
    if (res.status === 200) {
      res.data.forEach((v) => {
            if (v.sampleName == "需求背景描述") {
              data.textAreaPlaceholder.p1 = v.sampleContent
            } else if (v.sampleName == "拟解决的技术难题") {
              data.textAreaPlaceholder.p2 = v.sampleContent
            } else if (v.sampleName == "具体技术指标要求") {
              data.textAreaPlaceholder.p3 = v.sampleContent
            }
          })
    }
  })
  // const pid = await getExampleExplainTitleListApi({
  //   sampleTitle: '',
  //   ipi: 1,
  //   ips: 20,
  // }).then((res) => {
  //   if (res.status === 200) {
  //     return res.data.result.find(v => v.sampleTitle == '需求描述').id
  //   }
  // })
  // getExampleExplainListApi({
  //   sampleTitleId: pid,
  //   ipi: 1,
  //   ips: 20,
  // }).then(res => {
  //   data.descExampleSelectList= res.data.result
  // })
}
getExampleExplainList()
// //选择示例
// const changeExample = (val) => {
//   data.form.demandDescribe = val
// }








//文本内容获取关键词
const textToKeywords = () => {
  data.loading = true
  data.keywordsList = []
  const params = {
    data: data.form.demandDescribe + data.form.demandProblem + data.form.demandTarget,
    n: 20,
  }
  textToKeywordsApi(JSON.stringify(params)).then((res) => {
    if (res.status === 200) {
      data.keywordsList = res.data.keyword
      data.keywordsDialog = true
    }
    data.loading = false
  })
}
//文本内容获取产业链节点
const textToIndustry = () => {
  data.loading = true
  data.industryList = []
  const params = {
    data: data.form.demandDescribe + data.form.demandProblem + data.form.demandTarget,
    n: 20,
  }
  textToIndustryApi(JSON.stringify(params)).then((res) => {
    if (res.status === 200) {
      data.keywordsDialog = false
      data.industryList = res.data.industry_node
      data.industryDialog = true
    }
    data.loading = false
  })
}
//选择关键词
const chooseKeywords = (words) => {
  data.form.demandKeyword = words
}
//选择产业链
const chooseIndustry = (words) => {
  data.form.demandProductName = words
}
//取消
const closeDialog = (type) => {
  if (type === 0) {
    data.form.demandKeyword = []
    data.keywordsDialog = false
  } else if (type === 1) {
    data.industryDialog = false
    data.form.demandProductName = []
  }
}
//手动添加关键词
const addKeyword = () => {
  ElMessageBox.prompt('请输入需求关键词', '', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputPattern: /^[\u4e00-\u9fa5/a-zA-Z0-9]{1,15}$/,
    inputErrorMessage: '请输入正确的关键词'
  })
    .then(({ value }) => {
      data.form.demandKeyword.push(value)
    })
}
//删除关键词或产业链
const closeTag = (type, i) => {
  if (type === 0) {
    data.form.demandKeyword.splice(i, 1)
  } else if (type === 1) {
    data.form.demandProductName.splice(i, 1)
  }
}





//编辑技术需求
const editTechnologyDemand = () => {
  const params = {
    demandAreaCode: data.address.areaCode,
    demandAreaName: data.address.areaName,
    demandBudget: data.form.demandBudget,
    demandBudgetType: data.form.demandBudget ? 0 : 1,
    demandCityCode: data.address.cityCode,
    demandCityName: data.address.cityName,
    demandContactPerson: data.form.demandContactPerson,
    demandContactPhone: data.form.demandContactPhone,
    demandDescribe: data.form.demandDescribe,
    demandExpirationDate: data.form.demandExpirationDate,
    demandKeyword: data.form.demandKeyword,
    demandProblem: data.form.demandProblem,
    demandProductName: data.form.demandProductName,
    demandProvinceCode: data.address.provinceCode,
    demandProvinceName: data.address.provinceName,
    demandTarget: data.form.demandTarget,
    demandTitle: data.form.demandTitle,
    demandTypeId: data.form.demandTypeId,
    demandTypeName: data.form.demandTypeName,
    detailAddress: data.address.detailAddress,
    id: data.form.id,
    industryCodeOne: data.industry.industryCode1,
    industryCodeThree: data.industry.industryCode3,
    industryCodeTwo: data.industry.industryCode2,
    industryNameOne: data.industry.industryName1,
    industryNameThree: data.industry.industryName3,
    industryNameTwo: data.industry.industryName2,
    isHot: data.form.isHot,
    isPublic: data.form.isPublic
  }
  editDemandApi(JSON.stringify(params)).then(res => {
    if (res.status === 200) {
      ElMessage({
        message: res.message,
        type: 'success',
      })
backRoute('Demand')
    }
  })
}

//编辑科技服务需求
const editServiceDemand = () => {
  const params = {
    demandProvinceName: data.address.provinceName,
    demandProvinceCode: data.address.provinceCode,
    demandCityName: data.address.cityName,
    demandCityCode: data.address.cityCode,
    demandAreaName: data.address.areaName,
    demandAreaCode: data.address.areaCode, //行政区
    demandTitle: data.form.demandTitle, //名称
    demandDescribe: data.form.demandDescribe, //背景描述
    demandContactPerson: data.form.demandContactPerson, //联系人
    demandContactPhone: data.form.demandContactPhone, //手机
    demandTypeId: data.form.demandTypeId,
    detailAddress: data.address.detailAddress,
    demandTypeName: data.form.demandTypeName,
    isHot: data.form.isHot,
    id:data.form.id,
    isPublic: data.form.isPublic,
  }
  editServiceDemandApi(JSON.stringify(params)).then(res => {
    if (res.status === 200) {
      ElMessage({
        message: res.message,
        type: 'success',
      })
backRoute(' Demand')
    }
  })
}



const save = async () => {
  const contact = await contactDom.value.validate((bool) => {
    return bool
  })
  if (data.form.demandTypeId == 1) {
    const form1 = await formDom1.value.validate((bool) => {
      return bool
    })
    const form2 = await formDom2.value.validate((bool) => {
      return bool
    })
    const form3 = await formDom3.value.validate((bool) => {
      return bool
    })
    // console.log(contact,form1,form2,form3,1111111111);

    if (form1 && form2 && form3 && contact) {
      editTechnologyDemand()
    }
  } else if (data.form.demandTypeId == 2) {
    const form4 = await formDom4.value.validate((bool) => {
      return bool
    })
    const form5 = await formDom5.value.validate((bool) => {
      return bool
    })
    const form6 = await formDom6.value.validate((bool) => {
      return bool
    })
    // console.log(contact,form4,form5,form6,2222222222);
    if (form4 && form5 && form6 && contact) {
      editServiceDemand()
    }
  }

}

</script>

<style lang="scss" scoped>
.el-select-dropdown__list {
  .el-select-dropdown__item {
    font-size: 12px;
  }
}
.edit-need-container {
  padding: 20px;
  ::v-deep .el-form-item__label {
    font-weight: 700;
  }

  ::v-deep .el-checkbox__label {
    font-size: 12px;
  }

  ::v-deep .el-radio__label {
    font-size: 16px;
    color: #333;
  }

  :deep(.el-textarea__inner){
    margin-top: 10px;
    padding: 10px;
  }

  .need-title {
    display: flex;
    padding: 14px 0;
    font-weight: 700;
    border-top: 1px solid #e3e3e3;

    .icon {
      width: 6px;
      height: 16px;
      background: #00a2ff;
      margin-right: 6px;
    }
  }

  .form-item-template {
    display: flex;
    align-items: center;
    margin-top: 20px;

    .form-item-title {
      margin-right: 10px;
    }
  }

  .tag {
    height: 32px;
    line-height: 32px;
    margin-right: 10px;
  }

  .send-btn {
    padding-top: 20px;
    text-align: center;
    border-top: 1px solid #e3e3e3;
  }
}

.dialog-title {
  .title-big {
    font-size: 20px;
    font-weight: 700;
  }

  .title-tips {
    font-size: 14px;
    margin-top: 10px;
  }
}

.desc-container {
  position: relative;
  width: 100%;

  .container {
    position: absolute;
    left: -110px;
    top: 40px;

    .title {
      font-weight: 700;
      color: #00a2ff;
      font-size: 12px;
      height: 14px;
      line-height: 14px;
    }
  }

  ::v-deep .el-input__inner {
    box-shadow: 0 0 0 1px #c0c4cc inset;
  }
}
:deep(.el-dialog__header) {
    color: #333;
    line-height: 20px;
    padding: 20px 20px 0 20px;

    h2 {
      margin-bottom: 10px;
    }
}

:deep(.el-dialog__body) {
    padding: 20px;
    padding-bottom: 10px;

    .el-checkbox-group {
      flex-wrap: wrap;
      line-height: 30px;

      .el-checkbox {
        width: 130px;
        margin: 0;
        margin-right: 22px;
        margin-bottom: 10px;
      }
    }

    .el-icon-question {
      color: #C5C9DB;
      transition: all 0.6s;

      &:hover {
        color: #F0454D;
      }
    }
}
</style>